<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import { Refresh } from '@element-plus/icons-vue'

const route = useRoute()
const isDesktop = ref(false)

const navItems = ref([
  { 
    path: '/disassembly', 
    label: '待拆', 
    icon: '📦',
    description: '收购与拆解'
  },
  { 
    path: '/listing', 
    label: '待上架', 
    icon: '✨',
    description: '精修与定价'
  },
  { 
    path: '/listed', 
    label: '已上架', 
    icon: '🛒',
    description: '销售中'
  },
  { 
    path: '/installation', 
    label: '待安装', 
    icon: '🔧',
    description: '订单与安装'
  },
  { 
    path: '/settlement', 
    label: '待结账', 
    icon: '💰',
    description: '费用结算'
  },
  { 
    path: '/archive', 
    label: '存档', 
    icon: '📁',
    description: '项目归档'
  },
])

const currentPageTitle = computed(() => {
  const currentItem = navItems.value.find(item => item.path === route.path)
  return currentItem ? currentItem.label : '未知页面'
})

// 检测设备类型
function detectDevice() {
  const userAgent = navigator.userAgent.toLowerCase()
  const isMobile = /mobile|android|iphone|ipad|phone/i.test(userAgent)
  const isTablet = /tablet|ipad/i.test(userAgent)
  const screenWidth = window.innerWidth
  
  // 桌面端：非移动设备且屏幕宽度大于1024px
  isDesktop.value = !isMobile && !isTablet && screenWidth > 1024
}

// 刷新当前页面
function refreshCurrentPage() {
  window.location.reload()
}

// 监听窗口大小变化
function handleResize() {
  detectDevice()
}

onMounted(() => {
  detectDevice()
  window.addEventListener('resize', handleResize)
})

// 监听路由变化
watch(route, () => {
  // 路由变化时的处理逻辑
})
</script>

<template>
  <div class="app-container" :class="{ 'desktop': isDesktop }">
    <!-- 桌面端：左侧导航栏 -->
    <template v-if="isDesktop">
      <el-aside class="desktop-sidebar" width="280px">
        <div class="sidebar-header">
          <div class="logo">
            <h2>🏠 二手衣柜管理</h2>
          </div>
        </div>
        <nav class="sidebar-nav">
          <router-link 
            v-for="item in navItems" 
            :key="item.path"
            :to="item.path"
            class="sidebar-nav-item"
            active-class="active"
          >
            <span class="nav-icon">{{ item.icon }}</span>
            <span class="nav-label">{{ item.label }}</span>
            <span class="nav-desc">{{ item.description }}</span>
          </router-link>
        </nav>
      </el-aside>
      
      <el-container class="desktop-main">
        <el-header class="desktop-header">
          <div class="header-content">
            <div class="breadcrumb">
              <el-breadcrumb separator="/">
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item>{{ currentPageTitle }}</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <div class="header-actions">
              <el-button type="primary" size="small" @click="refreshCurrentPage">
                <el-icon><Refresh /></el-icon>
                刷新
              </el-button>
            </div>
          </div>
        </el-header>
        
        <el-main class="desktop-content">
          <div class="content-wrapper">
            <router-view />
          </div>
        </el-main>
      </el-container>
    </template>

    <!-- 移动端：顶部导航栏 -->
    <template v-else>
      <el-header class="mobile-header">
        <div class="header-content">
          <div class="logo">
            <h2>🏠 二手衣柜管理</h2>
          </div>
          <nav class="nav-menu">
            <router-link 
              v-for="item in navItems" 
              :key="item.path"
              :to="item.path"
              class="nav-item"
              active-class="active"
            >
              {{ item.label }}
            </router-link>
          </nav>
        </div>
      </el-header>

      <el-main class="mobile-main">
        <div class="content-wrapper">
          <router-view />
        </div>
      </el-main>
    </template>
  </div>
</template>

<style scoped>
.app-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background-attachment: fixed;
}

/* 桌面端样式 */
.desktop {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.desktop-sidebar {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
  width: 280px;
  overflow-y: auto;
}

.sidebar-header {
  padding: 30px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.sidebar-header .logo h2 {
  margin: 0;
  background: linear-gradient(45deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
  font-size: 1.5rem;
  text-align: center;
}

.sidebar-nav {
  padding: 20px 0;
}

.sidebar-nav-item {
  display: flex;
  flex-direction: column;
  padding: 20px;
  text-decoration: none;
  color: #606266;
  border-radius: 0;
  transition: all 0.3s ease;
  font-weight: 500;
  position: relative;
  overflow: hidden;
  border-left: 4px solid transparent;
}

.sidebar-nav-item:hover {
  color: #667eea;
  background: rgba(102, 126, 234, 0.1);
  border-left-color: #667eea;
}

.sidebar-nav-item.active {
  color: #667eea;
  background: rgba(102, 126, 234, 0.15);
  border-left-color: #667eea;
  box-shadow: inset 0 0 20px rgba(102, 126, 234, 0.1);
}

.nav-icon {
  font-size: 2rem;
  margin-bottom: 8px;
  text-align: center;
}

.nav-label {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 4px;
  text-align: center;
}

.nav-desc {
  font-size: 0.9rem;
  color: #909399;
  text-align: center;
}

.desktop-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.desktop-header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 0;
  height: 60px;
  flex-shrink: 0;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 30px;
}

.breadcrumb {
  font-size: 1rem;
}

.header-actions {
  display: flex;
  gap: 15px;
}

.desktop-content {
  flex: 1;
  padding: 30px;
  background: transparent;
  overflow-y: auto;
}

.content-wrapper {
  max-width: none;
  margin: 0;
  height: 100%;
}

/* 移动端样式 */
.mobile-header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.mobile-header .header-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 20px;
}

.mobile-header .logo h2 {
  margin: 0;
  background: linear-gradient(45deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
  font-size: 1.3rem;
}

.mobile-header .nav-menu {
  display: flex;
  gap: 8px;
}

.mobile-header .nav-item {
  padding: 8px 15px;
  text-decoration: none;
  color: #606266;
  border-radius: 8px;
  transition: all 0.3s ease;
  font-weight: 500;
  font-size: 0.9rem;
}

.mobile-header .nav-item:hover {
  color: #667eea;
  background: rgba(102, 126, 234, 0.1);
}

.mobile-header .nav-item.active {
  color: #667eea;
  background: rgba(102, 126, 234, 0.15);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

.mobile-main {
  padding: 20px;
  min-height: calc(100vh - 60px);
}

.mobile-main .content-wrapper {
  max-width: 1000px;
  margin: 0 auto;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .desktop-sidebar {
    width: 250px;
  }
  
  .desktop-main {
    margin-left: 250px;
    width: calc(100% - 250px);
  }
  
  .desktop-content {
    padding: 25px;
  }
}

@media (max-width: 1024px) {
  .app-container {
    display: block;
  }
  
  .desktop-sidebar {
    display: none;
  }
  
  .desktop-main {
    margin-left: 0;
    width: 100%;
  }
  
  .desktop-header {
    display: none;
  }
  
  .desktop-content {
    padding: 20px;
  }
}

@media (max-width: 768px) {
  .mobile-header .header-content {
    flex-direction: column;
    gap: 15px;
    padding: 10px 20px;
  }
  
  .mobile-header .logo h2 {
    font-size: 1.2rem;
  }
  
  .mobile-header .nav-menu {
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
  }
  
  .mobile-header .nav-item {
    padding: 6px 12px;
    font-size: 0.85rem;
  }
  
  .mobile-main {
    padding: 15px;
  }
}

@media (max-width: 480px) {
  .mobile-header .logo h2 {
    font-size: 1.1rem;
  }
  
  .mobile-header .nav-item {
    padding: 5px 10px;
    font-size: 0.8rem;
  }
  
  .mobile-main {
    padding: 10px;
  }
}
</style>
